+function ($) {
  'use strict';

  $(document)
    .on('focus', '[data-placeholder]', function(e) {
      var $e = $(e.target)
      $e.prev('.placeholder').hide()
    })
    .on('blur', '[data-placeholder]', function(e) {
      var $e = $(e.target)
      var empty = $e.data('placeholder-empty')
      var val = $e.val().trim()

      if(empty && empty === val) {
        $e.prev('.placeholder').show()
      }

      if(val === '') {
        $e.prev('.placeholder').show()
      }
    })
    .on('click', '.placeholder-wrapper .placeholder', function(e) {
      var $e = $(e.target)
      $e.next().focus();
    })

  $(document).ready(function () {
    $('[data-placeholder]').each(function() {
      var $this = $(this)
      $this.wrap('<div class="placeholder-wrapper"></div>')
      var $placeholder = $('<div class="placeholder">' + $this.data('placeholder') + '</div>')
      $this.before($placeholder)
      $this.trigger('focus').trigger('blur')
    })
  })


}(jQuery);
